<template>
  <div>
    <el-card class="box-card">
      <el-form
        ref="requestParameters"
        :model="requestParameters"
        label-width="80px"
      >
        <el-form-item label="标签名称" prop="tags" class="el-col el-col-6">
          <el-input
            v-model="requestParameters.tags"
            placeholder="请选择活动区域"
          ></el-input>
        </el-form-item>
        <el-form-item label="城市" prop="province" class="el-col el-col-6">
          <el-select
            v-model="requestParameters.province"
            @change="handleProvince"
            placeholder="请选择活动区域"
          >
            <el-option
              v-for="(item, index) in province"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地区" prop="cityDate" class="el-col el-col-6">
          <el-select
            v-model="requestParameters.city"
            placeholder="请选择活动区域"
          >
            <el-option
              v-for="(item, index) in cityDate"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业简称" class="el-col el-col-6">
          <el-input
            v-model="requestParameters.shortName"
            placeholder="请选择活动区域"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" class="el-col el-col-6">
          <el-select
            v-model="requestParameters.state"
            placeholder="请选择活动区域"
          >
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="padding-left: 40px" class="el-col el-col-6">
          <el-button @click="clearFormData">清除</el-button>
          <el-button type="primary" @click="handleFilter">搜索</el-button>
        </el-form-item>
        <el-form-item style="text-align: right" class="el-col el-col-12">
          <el-button
            type="success"
            icon="el-icon-edit"
            @click="handleChangeUser"
            >新增用户</el-button
          >
        </el-form-item>
      </el-form>
      <el-alert :title="`共${total}条数据`" type="info" show-icon :closable="false"> </el-alert>
      <template>
        <el-table :data="dataList">
          <el-table-column align="center" label="序号">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="企业编号">
            <template slot-scope="scope">
              <span>{{ scope.row.number }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="企业简称">
            <template slot-scope="scope">
              <span>{{ scope.row.shortName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="标签">
            <template slot-scope="scope">
              <span>{{ scope.row.tags }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建者">
            <template slot-scope="scope">
              <span>{{ scope.row.creatorID }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建日期">
            <template slot-scope="scope">
              <span>{{ scope.row.addDate }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="备注">
            <template slot-scope="scope">
              <span>{{ scope.row.remarks }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.state === 1">启用</el-tag>
              <el-tag v-else>禁用</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                plain
                @click="clickUpload(scope.row)"
              ></el-button>
              <el-button
                :type="scope.row.state == 0 ? 'success' : 'warning'"
                :icon="
                  scope.row.state === 0 ? 'el-icon-check' : 'el-icon-close'
                "
                circle
                plain
                @click="cilckState(scope.row)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                plain
                @click="cilckRemove(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="requestParameters.page"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="requestParameters.pagesize"
        layout="sizes, prev, pager, next, jumper"
        background
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 编辑按钮 -->
    <el-dialog title="编辑用户" :visible.sync="reviseDialogVisible" width="50%">
      <el-form :model="editBody" :rules="rules" ref="editFormRef" label-width="80px">
        <el-form-item label="企业名称" prop="shortName">
          <el-input v-model="editBody.shortName"></el-input>
        </el-form-item>
        <el-form-item label="所属公司" prop="company">
          <el-input v-model="editBody.company"></el-input>
        </el-form-item>
        <el-form-item>
          <span
            >https://www.tianyancha.com （在此可查询所属公司全称及简称）</span
          >
        </el-form-item>
        <el-form-item label="城市地区" prop="province">
          <el-select v-model="editBody.province" placeholder="请选择">
            <el-option
              v-for="(item, index) in province"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <el-select v-model="editBody.city" placeholder="请选择">
            <el-option
              v-for="(item, index) in cityDate"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向（企业标签）" prop="tags">
          <el-input v-model="editBody.tags"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="editBody.remarks"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="reviseDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="clickEdit">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 新增用户 -->
    <el-dialog title="创建用户" :visible.sync="userDialogVisible" width="50%"  @close="close">
      <el-form
        :model="addBody"
        ref="addFormRef"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="企业名称" prop="shortName">
          <el-input v-model="addBody.shortName"></el-input>
        </el-form-item>
        <el-form-item label="所属公司" prop="company">
          <el-input v-model="addBody.company"></el-input>
        </el-form-item>
        <el-form-item>
          <span
            >https://www.tianyancha.com （在此可查询所属公司全称及简称）</span
          >
        </el-form-item>
        <el-form-item label="城市地区" prop="province">
          <el-select v-model="editBody.province" @change="changecity">
            <el-option
              v-for="(item, index) in province"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <el-select v-model="editBody.city">
            <el-option
              v-for="(item, index) in cityDate"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向（企业标签）" prop="tags">
          <el-input v-model="addBody.tags"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="addBody.remarks"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="userDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="clickAdd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, detail, add, update, disabled, remove } from '@/api/hmmm/companys.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { status } from '@/api/hmmm/constants'
export default {
  data () {
    return {
      value: '',
      // 页面数据
      dataList: [],
      // 总条数
      total: null,
      // 城市数据
      province: [],
      cityDate: [],
      requestParameters: {
        page: 1,
        pagesize: 10,
        tags: null,
        province: null,
        city: null,
        stortName: null,
        state: null
      },
      // 新增所需数据
      addBody: {
        isFamous: true,
        shortName: '',
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: '',
      },
      // 文章数据详情
      compaysDetails: {},
      // 修改参数所需数据
      editBody: {
        shortName: '',
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: '',
        creatorID: '',
        addDate: '',
        number: '',
        state: '',
        isFamous: true,
        id: null
      },
      userDialogVisible: false,
      // 编辑对话框显示与隐藏
      reviseDialogVisible: false,
      // 表单验证
      rules: {
        shortName: [
          { required: true, message: '企业简称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        company: [
          { required: true, message: '所属公司不能为空', trigger: 'blur' },
          { min: 1, max: 1000, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        tags: [
          { required: true, message: '请输入标签', trigger: 'blur' },
          { min: 1, max: 1000, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        remarks: [
          { required: true, message: '备注不能为空', trigger: 'blur' },
          { min: 1, max: 1000, message: '长度在 1 到 1000 个字符', trigger: 'blur' }
        ],
        province: [
          { required: true, message: '请选择省份', trigger: 'blur' },
          { min: 1, max: 1000, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ]
      }
    }
  },

  computed: {
    status () {
      return status
    }
  },

  created () {
    this.getList()
    this.getCityData()
    this.getcityData()
  },

  methods: {
    async getList () {
      const { data: res } = await list(this.requestParameters)
      console.log(res)
      this.dataList = res.items
      this.total = res.counts
    },
    // 获取省数据
    getCityData () {
      this.province = provinces()
    },
    getcityData () {
      this.cityDate = citys()

    },
    // 选择省获取城市数据
    handleProvince (e) {
      console.log(e)
      this.cityDate = citys(e)
      console.log(this.requestParameters)
      this.requestParameters.city = this.cityDate[0]
    },
    changecity (e) {
      console.log(e)
      this.cityDate = citys(e)
      this.editBody.city = this.cityDate[0]
      console.log(this.cityDate)
      // this.cityDate
    },
    // 改变每页条数
    handleSizeChange (newSize) {
      this.requestParameters.pagesize = newSize
      this.getList()
    },
    // 改变页码
    handleCurrentChange (newPage) {
      this.requestParameters.page = newPage
      this.getList()
    },
    clearFormData () {
      this.requestParameters = {
        page: 1,
        pagesize: 10,
        tags: null,
        province: null,
        city: null,
        stortName: null,
        state: null
      },
        this.getList()
    },
    // 搜索信息
    handleFilter () {
      this.requestParameters.page = 1
      this.getList(this.requestParameters)
    },
    // 获取文章详情
    getCompaysDetails (row) {
      detail({ id: row.id }).then((res) => {
        // console.log(res.data)
        this.compaysDetails = res.data
        this.editBody.shortName = res.data.shortName
        this.editBody.company = res.data.company
        this.editBody.province = res.data.province
        this.editBody.city = res.data.city
        this.editBody.tags = res.data.tags
        this.editBody.remarks = res.data.remarks
        this.editBody.addDate = res.data.addDate
        this.editBody.creatorID = res.data.creatorID
        this.editBody.number = res.data.number
        this.editBody.state = res.data.state
      })
    },
    // 点击新增用户
    handleChangeUser () {
      this.userDialogVisible = true
    },
    close () {
      this.addBody = {
        isFamous: true,
        shortName: '',
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: '',
      }
      this.editBody.province = null
      this.editBody.city = null
      // this.$refs.addFormRef.resetFields()
    },
    // 点击确认添加
    clickAdd () {
      this.addBody.province = this.editBody.province
      this.addBody.city = this.editBody.city
      this.$refs.addFormRef.validate(async flag => {
        if (!flag) return
        const res = await add(this.addBody)
        console.log(res)
        if (res.status !== 200) return this.$message.error('创建用户失败')
        this.userDialogVisible = false
        this.$message.success('创建用户成功')
        this.getList()
        this.$refs.addFormRef.resetFields()
      })
    },
    // 点击了编辑按钮
    clickUpload (row) {
      this.getCompaysDetails(row)
      this.reviseDialogVisible = true
      this.editBody.id = row.id
      console.log('操作栏编辑对话框')
    },
    // 点击了编辑确定按钮
    clickEdit () {
      this.$refs.editFormRef.validate(async flag => {
        if (!flag) return
        console.log(this.editBody)
        const res = await update(this.editBody)
        console.log(res)
        if (res.status !== 200) return this.$message.error('创建用户失败')
        this.reviseDialogVisible = false
        this.$message.success('创建用户成功')
        this.getList()
      })
    },
    // 点击状态按钮
    async cilckState (val) {
      const confirmResult = await this.$confirm(
        `已成功${val.state === 1 ? '禁用' : '启用'}, 是否继续?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('您取消了操作')
      }
      await disabled({ id: val.id, state: (val.state === 1 ? 0 : 1) })
      val.state = val.state === 1 ? 0 : 1
      this.$message.success(`已成功${val.state === 0 ? '禁用' : '启用'}`)
    },
    // 删除
    cilckRemove (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const res = remove(row)
        this.getList()
        this.$message.success('删除成功!')
      }).catch(() => { 
        this.$message('已取消删除')
      })
    }
  }
}
</script>

<style scoped lang='less'>
.box-card {
  margin: 20px 0 0 15px;
}
.el-table {
  margin-top: 20px;
}
.el-pagination {
  text-align: right;
  margin: 15px 10px;
}
</style>
